<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>商城-登录注册</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #f6f6f6;
		}

		.footer_left {
			display: flex;
			margin-top: 0.32rem;
			width: 25%;
			/*justify-content: space-between;*/
		}

		.footer_left>div img {
			width: 1.1rem;
			margin: 0 auto;
			margin-bottom: 0.2rem;
			/*margin-right: 0.5rem;*/
		}

		.footer_left>div {
			width: 2rem;
			font-size: 0.5rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 0.7rem;
			text-align: center;
			float: left;
		}

		.footer_left>div:nth-child(1) {
			width: 2rem;
			margin-top: 0.5rem;
			margin-left: 0.5rem;
		}

		.footer_left>div:nth-child(2) {
			width: 2rem;
			margin-top: 0.5rem;
		}

		.footer_left>div:nth-child(3) {
			margin-right: 0rem;
			margin-top: 0.5rem;
		}

		.join_goods_one {
			display: flex;
			margin-top: 0.35rem;
			width: 70%;
		}

		.join_goods_one>div:nth-child(1) {
			width: 8rem;
			height: 2rem;
			background: rgb(0, 90, 147);
			border-radius: 5rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 2rem;
			margin-left: 1.5rem;
			float: left;
		}

		.join_goods_one>div:nth-child(2) {
			width: 8rem;
			height: 2rem;
			background: rgb(247, 48, 36);
			border-radius: 5rem;
			text-align: center;
			line-height: 2rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-left: 0.8rem;
			float: left;
		}

		#footer {
			display: flex;
			justify-content: space-between;
		}

		.join_goods_two {
			width: 10rem;
			height: 2rem;
			background: rgba(238, 238, 238, 1);
			border-radius: 1rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 2rem;
			margin-top: 0.35rem;
		}

		.my-pur {
			flex: 1;
			width: 6rem;
			height: 2rem;
			line-height: .8rem;
			text-align: center;
			color: #fff;
			border-radius: 5rem;
			font-weight: 500;
			font-size: .55rem;
			background: rgb(0, 90, 147);
			font-family: PingFangSC-Medium;
			display: flex;
			flex-direction: column;
			float: left;
			margin-left: 0.5rem;
		}

		.my-pur>span:nth-child(1) {
			flex: 1;
			font-size: .6rem;
			line-height: 1rem;
			position: relative;
		}

		.my-pur>span:nth-child(1) span {
			position: absolute;
			bottom: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-pur>span:nth-child(2) {
			flex: 1;
			font-size: .55rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: .8rem;
			position: relative;
		}

		.my-pur>span:nth-child(2) span {
			position: absolute;
			top: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-tuan {
			flex: 1;
			width: 6rem;
			height: 2rem;
			line-height: .8rem;
			text-align: center;
			color: #fff;
			border-radius: 5rem;
			font-weight: 500;
			font-size: .55rem;
			background: #FF3024;
			font-family: PingFangSC-Medium;
			display: flex;
			flex-direction: column;
			margin-left: 0.5rem;
			float: left;
		}

		.my-tuan>span:nth-child(1) {
			flex: 1;
			line-height: 1rem;
			font-size: .6rem;
			position: relative;
		}

		.my-tuan>span:nth-child(1) span {
			position: absolute;
			bottom: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-tuan>span:nth-child(2) {
			flex: 1;
			font-size: .55rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: .8rem;
			position: relative;
		}

		.my-tuan>span:nth-child(2) span {
			position: absolute;
			top: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.carNum {
			background-color: red;
			width: 0.55rem;
			height: 0.55rem;
			position: absolute;
			text-align: center;
			right: 0.1rem;
			top: 0;
			color: #ffffff;
			z-index: 100;
			border-radius: 50%;
			font-weight: 600;
			font-size: 0.15rem;
			line-height: 0.55rem;
		}
	</style>
</head>

<body>
	<div class="" id="app">
		<!-- 底部栏 -->
		<div id="footer" style="width:100%;height:2.7rem;position:fixed;bottom:0;background:#ffffff;z-index: 800;border-top:1px solid rgba(238,238,238,0.5);">
			<!-- 客服 收藏 购物车-->
			<div class="footer_left">
				<!-- 客服 -->
				<!-- <div class="" tapmode onclick="service()">
					<img src="../../image/icon/service.png">
					<span>客服</span>
				</div> -->
				<!-- 收藏 -->
				<div v-if="goodsinfo.is_collect=='1'" class="" tapmode onclick="fav_good()">
					<img src="../../image/icon/icon-fav-active.png">
					<!-- <span tapmode onclick="fav_good()">已收藏</span> -->
				</div>
				<div v-else class="" tapmode onclick="fav_good()">
					<img src="../../image/icon/star_noselect.svg">
					<!-- <span tapmode onclick="fav_good()">收藏</span> -->
				</div>


				<!-- 购物车 -->
				<div class="" tapmode onclick="openTocart()" style="position: relative">
					<!-- <div class="carNum" v-if="carNum.count>0">{{carNum.count}}</div> -->
					<img src="../../image/icon/new-shopping.png" alt="">
					<!-- <span>购物车</span> -->
				</div>

			</div>

			<div class="join_goods" v-if="info_type.page=='good'">
				<!-- 加入购物车-立即购买-已售空 -->
				<div class="join_goods_one" v-if="goodsinfo.sold_per!=100">
					<div class="" style="width:8.5rem;margin-left:0.5rem;" tapmode onclick="buy_now()">立即兑换</div>
				</div>
				<div class="join_goods_two" v-if="goodsinfo.sold_per==100">
					已售罄
				</div>
			</div>
			<!--  -->




		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			colllect: "0",

			isActive: true,
			id: 0,
			index: 0,
			scrolled: false,
			serve_show: false,
			tabId: 1,
			detial_show: false,
			attr_show: false,
			good_sku_view: [],
			good_sku_view_miao: [],
			type: 'good', //'good'普通商品falg-2,'tuan'团购商品falg-4，'miao'秒杀商品falg-3，对应返回的page字段
			goodsinfo: {},
			goodsinfo_miao: {},
			goodSku: {},
			count: 1,
			is_cart: false,
			is_tuan: false,
			now_time: Date.parse(new Date()) / 1000,
			share_pic: '',
			pic_done: false,
			loginout: false,
			share_show: false,
			share_gold: 0,
			tuan_uid_num: 0,
			info_type: "",
			miao_id: 0,
			time_id: 0,
			remind: [],
			miao_start_time: 0,
			carNum: ""
		},

		methods: {
			is_remind: function(act_id, good_id) {
				var status = false;
				vm.remind.forEach(function(el) {
					if (el.miao_id == act_id && el.good_id == good_id) {
						status = true
					}
				})
				return status;
			},
			add_remind: function(act_id, good_id) {
				var data = vm.remind;
				var newdata = {
					miao_id: act_id,
					good_id: good_id,
					time: vm.goodsinfo_miao.miao_start_date
				}
				data.push(newdata)
				vm.remind = data
				$api.setStorage('remind', data)
				send_event('remind_add')
				toast('设置成功，将在开抢时提醒您')
			},
			remove_remind: function(act_id, good_id) {
				var data = vm.remind;
				var newdata = []
				data.forEach(function(el, index) {
					if (el.miao_id == act_id && el.good_id == good_id) {

					} else {
						newdata.push(el)
					}
				})
				vm.remind = newdata
				$api.setStorage('remind', newdata)
					//					发送事件给首页
				send_event('remind_add')
				toast('已取消秒杀提醒~')
			},
			get_goodSku: function() {
				get_data('api/Good/goodSku', {
					good_id: vm.id
				}, function(ret) {
					if (ret.status) {
						vm.goodSku = ret.data
					}
				})
			},
			goodDetails: function() {
				get_data('api/Score/goodDetails', {
					token: $api.getStorage('token'),
					good_id: vm.id
				}, function(ret) {
					vm.info_type = ret.data
						// alert(JSON.stringify(ret.data.tuan_uid.length))

					if (ret.status) {
						vm.goodsinfo = ret.data
							// this.$refs.video.src = res.data.video
						// console.log(JSON.stringify(vm.goodsinfo))
							// swiper_init()
						if (!vm.goodsinfo.cover) {
							vm.share_pic = '../../image/logo.jpg'
							vm.pic_done = true
						} else {
							download(vm.goodsinfo.cover, function(ret) {
								compress_pic(ret, function() {
									vm.share_pic = ret;
									vm.pic_done = true
								})
							})
						}
					} else {
						if (ret.msg == '商品已下架了') {
							toast(ret.msg)
							send_event('goodsref')
							delay_close(600)
						}
					}
					if (ret.status == 1) {

					}
				})
			},
			goodDetails_miao: function() {
				get_data('api/Good/goodDetails_miao', {
					token: $api.getStorage('token'),
					good_id: vm.id,
					miao_id: vm.miao_id,
					time_id: vm.time_id
				}, function(ret) {
					if (ret.status) {
						vm.goodsinfo_miao = ret.data
						vm.good_sku_view_miao = ret.data.good_sku_view
					} else {
						if (ret.msg == '商品已下架了33') {}
					}
				})
			},
			getCarnum: function() {
				get_data('api/GoodCart/goodCartCount', {
					token: $api.getStorage('token'),
				}, function(ret) {
					console.log(JSON.stringify(ret));
					vm.carNum = ret.data
					console.log(vm.carNum);

				})
			}
		},
		computed: {
			kucun: function() {
				var kucun = false;
				if (this.good_sku_view.length == 0) {
					return this.goodsinfo.stock_num;
				}
				if (this.good_sku_view.length != this.goodSku.good_attr.length) {
					vm.count = 0
					return 0;
				}
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					if (name === el.good_sku) {
						if (el.stock_num) {
							kucun = el.stock_num;
							vm.count = 1
						} else {
							kucun = 0
							vm.count = 0
						}
					}
				})
				if (!kucun) {
					kucun = 0
					vm.count = 0
				}
				return kucun;
			},
			price: function() {
				if (vm.is_tuan) {
					var price = this.goodsinfo.tuan_price * this.count;
				} else {
					var price = this.goodsinfo.current_price * this.count;
				}
				return price.toFixed(2);
			}
		}
	})

	//		收藏商品
	function fav_good() {
		var status = vm.goodsinfo.is_collect
		opera(vm.id, 'good', 2, function(ret) {
			if (ret.status) {
				send_event('fav_ref')
				if (status == '1') {
					Vue.set(vm.goodsinfo, 'is_collect', '0')
					toast('取消收藏成功')
				} else {
					toast('收藏成功')
					Vue.set(vm.goodsinfo, 'is_collect', '1')
				}
			}
		})
	}

	// 商城-登录注册 头部和底部的分页面
	apiready = function() {
		getHasPermission('storage', function(ret) {});

		vm.id = api.pageParam.id;
		vm.miao_id = $api.getStorage('miao_id');
		vm.time_id = $api.getStorage('time_id');
		// 初始化接口数据
		vm.goodDetails();
		vm.get_goodSku();
		vm.getCarnum();
		$api.fixTabBar($api.byId('footer'))
			// open_frame2 新封装，仅展示底部栏
		open_frame2('score_detail_f', 'score_detail_f.html', 'footer', false)

		// 获取购买/开团的价格数据
		add_event('tuan_ref', function(ret) {
			vm.goodDetails()
			vm.get_goodSku()
		})
		if (vm.miao_id != 'undefined') {
			// vm.goodDetails_miao();
		}
		authToken()
		setInterval(function() {
			vm.now_time = Date.parse(new Date()) / 1000
		}, 200)


		add_event('for_goods', function(ret) {
			// alert(111)
		})
		if ($api.getStorage('remind')) {
			vm.remind = $api.getStorage('remind')
		}
	};


	// 加入购物车
	function join_car() {
		// alert(666)
		api.sendEvent({
			name: 'info_car',
		});
	}


	// 立即购买
	function buy_now() {
		api.sendEvent({
			name: 'info_buy',
		});
	}

	// 购物车
	function openTocart() {
		// alert(JSON.stringify(vm.goodsinfo))
		api.execScript({
			name: 'root',
			script: 'openTocart()'
		});
		closeToRoot()
	}
	// 单独购买
	function buy_alone() {
		api.sendEvent({
			name: 'info_alone',
		});
	}

	// 我要开团

	function regiment() {
		api.sendEvent({
			name: 'info_shop_car',
		});
	}

	// 详情
	add_event('for_detail', function(ret) {
		// vm.isActive = true
		// alert(222)
	})

	// 检测是否登录
	function authToken() {
		get_data('api/login/isToken', {
			token: $api.getStorage('token')
		}, function(ret) {
			if (ret.status == '0') {
				vm.loginout = true
			}
			if (ret.status == '1') {
				vm.loginout = false
			}
		})
	}



	function service() {
		if (vm.loginout) {
			openWin_login();
			return;
		} else {
			openmeiQia()
		}
	}
</script>

</html>
